<template>
  <div class="search">
    <div class="title">
      <van-nav-bar title="面经分享">
        <template #left>
          <i
            class="iconfont iconbtn_nav_back iconStyle"
            @click="$router.go(-1)"
          ></i>
        </template>
      </van-nav-bar>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="main" v-if="isResult === false">
      <div class="hotSearch">
        <van-cell title="大家都在搜" />
        <ul class="searBtn">
          <li
            v-for="(item, index) in searchList"
            :key="index"
            @click="onSearch(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="history">
        <van-cell title="历史搜索">
          <template #default>
            <span class="delAll" @click="delHistory">清空</span>
          </template>
        </van-cell>
        <ul class="searBtn">
          <li
            v-for="(item, index) in historyList"
            :key="index"
            @click="onSearch(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div class="shareBox" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <share
          :item="item"
          v-for="(item, index) in searchResult"
          :key="index"
        ></share>
      </van-list>
    </div>
  </div>
</template>

<script>
import share from '@/views/layout/find/share.vue'
import { getSearch, getShare } from '@/api/find.js'
import { setLocal, getLocal, removelocal } from '@/utils/local.js'
export default {
  components: {
    share
  },
  data () {
    return {
      total: 0,
      loading: false,
      finished: false,
      value: '',
      searchList: [],
      searchResult: [],
      isResult: false,
      historyList: JSON.parse(getLocal('history')) || []
    }
  },
  created () {
    getSearch().then(res => {
      this.searchList = res.data.data
    })
    this.delHistory()
  },
  methods: {
    async onSearch (key) {
      //   console.log(key)
      this.isResult = true
      this.value = key
      //   根据关键字搜索
      const res = await getShare({ q: key })
      //   保存搜索关键字
      this.historyList.unshift(key)
      // 对历史数据列表去重
      this.historyList = [...new Set(this.historyList)]
      if (this.historyList.length > 5) {
        this.historyList = this.historyList.splice(0, 5)
      }
      // 将搜索列表存入到localstorage中
      setLocal('history', JSON.stringify(this.historyList))

      //   将item中title属性关键字提取出来替换
      res.data.data.list.forEach(item => {
        item.title = item.title.replace(
          key,
          `<span style="color: red">${key}</span>`
        )
      })
      this.searchResult = res.data.data.list
      this.total = res.data.data.total
    },
    onLoad () {
      if (this.searchResult.length >= this.total) {
        this.finished = true
      }
    },
    onCancel () {
      this.isResult = false
    },
    delHistory () {
      removelocal('history')
      this.historyList = []
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  font-size: 12px;
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  .title {
    .iconStyle {
      font-size: 44px;
    }
    /deep/.van-nav-bar__left {
      padding-left: 0;
    }
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
  .delAll {
    font-size: 12px;
    color: #6f7188;
  }
  .searBtn {
    display: flex;
    padding: 0 15px;
    li {
      padding: 5px;
      background-color: #f7f4f5;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  /deep/.van-cell::after {
    border-bottom: 0;
  }
  /deep/.van-cell__title {
    width: 100%;
  }
}
</style>
